<template>
  <div class="left-view__content-logo">
    <!-- 头像挂件 -->
    <img class="logo-kuang" :src="logoKuang">

    <img class="fmt" :src="fmt" @click="fmtClick"></img>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import logoKuang from '@/assets/images/logokuang.png'
import fmt from '@/assets/images/fmt.webp'

const router = useRouter()
const fmtClick = () => {
  router.push({
    path: '/sample-chat'
  })
}
</script>

<style lang="scss" scoped>
  .left-view__content-logo {
    flex-shrink: 0;
    width: 90%;
    position: relative;
    aspect-ratio: 1/1;
    margin-top: 50px;
    background-size: cover;
    border-radius: 50%;
    background-image: url('../../../assets/images/logo.png');
    .logo-kuang {
      position: absolute;
      top: -15%;
      left: -10%;
      width: 120%;
      aspect-ratio: 1/1
    }
    .fmt {
      position: absolute;
      top: 70%;
      right: 15%;
      cursor: pointer;
      width: 52px;
    }
  }
</style>
